<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>person center</title>
    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" href="../static/css/personCenter.css" th:href="@{/css/personCenter.css}">
    <link rel="stylesheet" href="../static/css/common.css" th:href="@{/css/common.css}">
    <link rel="stylesheet" href="../static/css/mainPage.css" th:href="@{/css/mainPage.css}">
    <link rel="stylesheet" href="../static/css/confirm.css" th:href="@{/css/confirm.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div><div style="height: 9.5vh; display: flex; justify-content: center; align-items: center; position: relative;background-color: white;width: 100%" th:replace="nav::nav"></div>
    <div class="Box">
        <div class="blockA">
            <div class="part-a">
                <div class="photo"><i class="iconfont">&#xe8bc;</i>&nbsp;&nbsp;上传封面照片</div>
                <div class="landscript">
                    <div class="imgcontents">
                        <input type="file" class="files" name="file" style="display: none;"/>
                        <div id="imgs">
                            <img  src="" id="uimgs" class="img"  />
                        </div>
                    </div>
                </div>
                <div class="tooltip">
                    <h3>上传一张图片，展示在这里</h3>
                    <p>你可以使用自己的摄影作品、你喜欢的照片，<br>或是任何能展现你特质的图片。</p>
                    <a href="#">哪里能找到可免费使用的优质图片？</a>
                </div>
                <div class="address" th:if="${not #strings.isEmpty(user)}"> <i class="iconfont">&#xe606;</i>&nbsp;IP属地<span th:text="${user.location}"></span></div></div>
            <div class="part-b"  th:each="user, userStat: ${user}">
                <a href="../templates/accountSetting.html" th:href="@{/updatePassword}"><i class="iconfont" id="setting">&#xe600;</i></a>
                <div class="name" ></div>
                <i class="iconfont" id="women" >&#xe658;</i>
                <a  class="zl" th:data-user-id="${user.id}">查看详细资料</a>
                <div class="modal" id="detailModal" style="display: none">
                    <span class="close" id="closeBtn">&times;</span>
                    <div class="modal-content">
                        <h2>详细信息</h2>
                        <p>性别:<span id="userGender"></span></p>
                        <p>居住地：<span  id="userLocation"></span></p>
                        <p>职业：<span  id="userIndustry"></span></p>
                        <p>一句话介绍：<span  id="userBio"></span></p>
                    </div>
                </div>
                <a class="back cursor-pointer"  href="http://localhost:8080/mainPageRecommend" style="z-index: 20"><i class="iconfont" >&#xe60b;</i>返回首页</a>
                <a class="edit" href="../templates/editPerson" th:href="@{/edit-person}">编辑个人资料</a>
            </div>
            <div class="part-c" style="z-index: 95;">
                <div class="imgcontent">
                    <input type="file" class="file" name="file" />
                    <span id="img">
                    <img src="../static/img/image1.png" id="uimg" class="img" width="170px" height="170px" />
                </span>
                </div><div class="heimu" id="photo-edit"><i class="iconfont">&#xe8bc;</i><p>修改我的头像</p></div></div>
        </div>
        <div class="blockB">
            <div class="tap">
                <ul>
                    <li><a href="/userHomepage" class="tap-a" th:href="@{/userHomepage}">文章&nbsp;&nbsp;</a></li>
                    <li><a href="/userHomepage/videos" class="tap-a" th:href="@{/userHomepage/videos}" >视频&nbsp;&nbsp;  </a></li>
                    <li><a href="/userHomepage/views" class="tap-a" th:href="@{/userHomepage/views}" >想法&nbsp;&nbsp;  </a></li>
                    <li><a href="/userHomepage/likes" class="tap-a" th:href="@{/userHomepage/likes}" >喜欢&nbsp;&nbsp; </a></li>
                    <li class="active"> <a href="/userHomepage/follower" class="tap-a" th:href="@{/userHomepage/follower}" >关注订阅&nbsp; </a></li></ul>
            </div>
            <div class="attention" style="display: block;">
                <div class="mydongtai">
                    <div class="tab-container">
                        <div class="tab-header">
                            <span class="tab-item active"><a href="/userHomepage/follower" class="tap-a" th:href="@{/userHomepage/follower}" >我关注的人 </a></span>
                            <span class="tab-item"><a href="/userHomepage/fans" class="tap-a" th:href="@{/userHomepage/fans}" >关注我的人</a></span>
                        </div></div>
                </div>
                <div class="tab-content">
                    <div class="contents-item active" th:each="follower,followerStat: ${follower}">
                        <div style="display: block;" >
                            <a  th:href="@{/otherCenter(id=${follower.id})}">
                            <div class="answer-header" >
                                <img src="../static/img/image2.png" th:src="${follower.avatar}" alt="用户头像" class="avatar">
                                <div class="user-infos">
                                    <span class="user-name" th:text="${follower.username}"></span>
                                    <p class="user-motto" th:text="${follower.bio}"></p>
                                </div> </div>
                            </a>
                            </div>
                            <span id="follow" class="unfollows" th:attr="data-user-id=${follower.id}">已关注</span>
                            <div  class="user-icons"><span th:text="${follower.followerCount}"></span>关注者</div>
                          </div>
                    </div>
                </div></div>
        <div class="blockC" >
            <a class="guanzhu" href="/userHomepage/follower"  th:href="@{/userHomepage/follower}">关注了</a>
            <div class="num1" th:text="${followersNum}">1</div>
        </div>
        <div class="blockD" >
            <a class="b-guanzhu" href="/userHomepage/fans"  th:href="@{/userHomepage/fans}">关注者</a>
            <div class="num2" th:text="${fansNum}">0</div>
        </div>
        <div class="blockE">
            <div class="tap2">
                <ul><li ><a class="guazhu" href="">发布的文章</a><a class="count" href="" th:text="${postsNum}">0</a></li>
                    <li><a class="guazhu" href="">发布的视频</a><a class="count" href="" th:text="${videosNum}">0</a></li>
                    <li><a class="guazhu" href="">发布的想法</a><a class="count" href="" th:text="${ThoughtsNum}">0</a></li>
                </ul></div>
            <div class="look">点赞了<span th:text="${likesNum}"></span>篇文章</div>
            <div class="help">
                <ul>
                    <li> <i class="iconfont">&#xe72c;</i>&nbsp;帮助中心<p><a href="Contact.html" th:href="@{/Contact}">联系我们</a><a href="protect.html" th:href="@{/protect}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隐私保护</a></p></li>
                    <li> <i class="iconfont">&#xe651;</i>&nbsp;举报中心<p><a href="RumorReport.html" th:href="@{/RumorReport}">网络谣言举报</a><a href="InfringementReport.html" th:href="@{/InfringementReport}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;侵权举报</a></p></li>
                </ul></div>
        </div>
        <div class="blockF">
            <img class="creat-img" src="../static/img/image2.png" th:src="@{/img/image2.png}" alt="" width="72px" height="50px">
            <div class="c-center">创作中心</div>
            <div class="text"><p class="text1">开启你的慧问创作之旅</p><p class="text2">发布首篇内容，开通创作中心</br>快来成为慧问的作者吧～</p>
                <img class="c-logo" src="../static/img/logo.png" th:src="@{/img/logo.png}" alt="A cute picture" width="80px" height="90px"></div>
            <a class="creat" href="creatorCenterAccount.html" th:href="@{/creativeCenter}"> <i class="iconfont">&#xe727;</i>&nbsp;开始创作</a>
        </div>
    </div></div>
</body>
<script src="../static/js/personCenter.js" th:src="@{/js/personCenter.js}"></script>
<script src="../static/js/common.js" th:src="@{/js/common.js}"></script>
<script src="../static/js/nav.js" th:src="@{/js/nav.js}"></script>
<script src="../static/js/confirm.js" th:src="@{/js/confirm.js}"></script>
<script th:inline="javascript">
    let background= [[${backgroundUrl}]];
    console.log(background);
    let background2= [[${background}]];
    console.log(background2);
    console.log("文章数");
    let post1 = [[${postsNum}]];
    console.log(post1)
    console.log("点赞的文章");
    let post2 = [[${likePosts}]];
    console.log(post2)
    console.log("视频");
    let post3 = [[${videos}]];
    console.log(post3)
    console.log("粉丝");
    let post4 = [[${fans}]];
    console.log(post4)
    console.log("想法");
    let post5 = [[${Thoughts}]];
    console.log(post5)
    console.log("关注");
    let post6 = [[${follower}]];
    console.log(post6)
    console.log("关注");
    let post7 = [[${followersNum}]];
    console.log("followersNum："+post7)
    let back=document.querySelector('.back');
    back.addEventListener('click',function(){
        window.location.href='/mainPageRecommend';
    })

    // }
    document.addEventListener('DOMContentLoaded', function() {
        let Following=[[${follower}]];
        let follow_button = document.querySelector('.follows');
        let unfollow_button = document.querySelector('.unfollows');
        if(unfollow_button) { // 确保按钮存在
            if(!Following) {
                unfollow_button.classList.remove('unfollows');
                unfollow_button.classList.add('follows');
                unfollow_button.textContent = '+关注他';
            }
            if(Following){
                unfollow_button.classList.remove('follows');
                unfollow_button.classList.add('unfollows');
                unfollow_button.textContent = '已关注';
            }

        }

        if(follow_button) { // 确保按钮存在
            if(!Following) {
                follow_button.classList.remove('unfollows');
                follow_button.classList.add('follows');
                follow_button.textContent = '+关注他';
            }
            if(Following){
                follow_button.classList.remove('follows');
                follow_button.classList.add('unfollows');
                follow_button.textContent = '已关注';
            }

        }

    });
</script>
</html>